
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>6、正则表达式 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>6、正则表达式 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是正则表达式 (Regex)？它有哪些广泛的应用领域？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">正则表达式是一种用于定义字符串模式的工具，通过特定的语法规则，可以实现对字符串的检索、匹配和替换。它广泛应用于文本处理、数据验证、日志分析等领域。</div>
          </div>
          <div class="card-source">来源: 什么是正则表达式？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">语法</div>
          <div class="card-question">在正则表达式中，元字符 `*`、`+` 和 `?` 分别代表什么匹配规则？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">语法</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`*` 匹配前面的字符零次或多次；`+` 匹配前面的字符一次或多次；`?` 匹配前面的字符零次或一次。</div>
          </div>
          <div class="card-source">来源: 正则表达式的基本语法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">语法</div>
          <div class="card-question">请解释预定义字符类 `\d`、`\w` 和 `\s` 的含义及它们各自等价的表达式。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">语法</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`\d` 匹配任意数字，等价于 `[0-9]`；`\w` 匹配字母、数字或下划线，等价于 `[a-zA-Z0-9_]`；`\s` 匹配任意空白字符，如空格、制表符等。</div>
          </div>
          <div class="card-source">来源: 正则表达式的基本语法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">正则表达式中的捕获分组 `(abc)` 和非捕获分组 `(?:abc)` 有何区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">捕获分组 `(abc)` 会匹配字符串 "abc" 并将其捕获，以便后续引用（如 `\1`）。非捕获分组 `(?:abc)` 同样匹配 "abc"，但不会创建捕获组，因此无法被引用。</div>
          </div>
          <div class="card-source">来源: 正则表达式的基本语法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">文档中提到了哪三个使用正则表达式进行数据提取的具体应用场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 从URL中提取域名，用于爬虫系统数据分类。2. 提取文本中的IP地址，用于日志分析定位来源。3. 匹配特定格式的时间戳，用于提取特定时间段的日志信息。</div>
          </div>
          <div class="card-source">来源: 常见应用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">在保护用户隐私方面，正则表达式可以如何对手机号和银行卡号进行脱敏处理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">对于手机号，可以使用 `(\d{3})\d{4}(\d{4})` 匹配并用 `$1****$2` 替换，隐藏中间四位。对于银行卡号，可以使用 `(\d{4})\d{8,11}(\d{4})` 匹配并用 `$1********$2` 替换，隐藏中间部分信息。</div>
          </div>
          <div class="card-source">来源: 常见应用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优化</div>
          <div class="card-question">什么是正则表达式的贪婪匹配？如何将其转换为非贪婪模式以优化性能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优化</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">默认情况下，`*` 和 `+` 等量词是贪婪的，会尽可能多地匹配字符。可以通过在量词后添加 `?` 将其转为非贪婪（或称懒惰）模式，例如使用 `<.*?>` 代替 `<.*>`。</div>
          </div>
          <div class="card-source">来源: 性能优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Java中频繁使用同一个正则表达式时，应如何优化性能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应该使用预编译。通过 `Pattern.compile` 方法将正则表达式字符串预编译成一个 `Pattern` 对象，可以显著提高多次匹配时的性能。</div>
          </div>
          <div class="card-source">来源: 性能优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Java代码中编写正则表达式时，为什么需要使用双重转义，例如用 `\\d` 来表示 `\d`？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为在Java的字符串字面量中，反斜杠 `\` 本身是一个转义字符。因此，第一个反斜杠用于转义第二个反斜杠，这样才能将一个实际的反斜杠和字符 `d`（即 `\d`）传递给正则表达式引擎进行解析。</div>
          </div>
          <div class="card-source">来源: 注意事项</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
